<style lang="postcss" scoped>
.home-container {
}
</style>
<template>
  <section class="home-container">
    <MasterPage title>
      <div slot="searchContent" class="search-content-slot">
        <Form :model="formItem" :label-width="80">
          <Row type="flex">
            <Col span="4">
              <FormItem label="学号">
                <Input v-model="formItem.studentNo"></Input>
              </FormItem>
            </Col>
            <Col span="4">
              <FormItem label="姓名">
                <Input v-model="formItem.name"></Input>
              </FormItem>
            </Col>
            <Col span="4">
              <FormItem label="所在班级">
                <!-- <Input v-model="formItem.classId"></Input> -->
                <Select v-model="formItem.classId" style="width:200px">
                  <Option
                    v-for="item in classList"
                    :value="item.id"
                    :key="item.id"
                    :label="item.name"
                  ></Option>
                </Select>
              </FormItem>
            </Col>
          </Row>
        </Form>
      </div>
      <div slot="search">
        <Button style="margin-right:5px;" type="primary" icon="md-add" @click="add()">添加</Button>
        <Button
          style="margin-right:5px;"
          type="error"
          icon="md-remove"
          @click="removeSelection()"
        >删除</Button>
        <!-- <Button style="margin-right:5px;" type="info" icon="md-cloud-upload">批量导入</Button> -->
        <Button type="primary" icon="md-add" @click="exportDoc()">导出</Button>
      </div>
      <div slot="btns">
        <Button
          style="margin-right:5px;"
          type="success"
          icon="md-cloud-upload"
          @click="excelImport(1)"
        >身体状态导入</Button>
        <Button
          style="margin-right:5px;"
          type="success"
          icon="md-cloud-upload"
          @click="excelImport(2)"
        >综合能力考核导入</Button>
        <Button
          style="margin-right:5px;"
          type="success"
          icon="md-cloud-upload"
          @click="excelImport(3)"
        >学生信息导入</Button>
        <Button
          style="margin-right:5px;"
          type="success"
          icon="md-cloud-upload"
          @click="excelImport(4)"
        >出勤情况导入</Button>
        <Button
          style="margin-right:5px;"
          type="success"
          icon="md-cloud-upload"
          @click="excelImport(5)"
        >综合素质评价导入</Button>
        <Button type="info" icon="ios-search" @click="search()">查询</Button>
      </div>
      <div slot="paddingContent">
        <Table :columns="columns1" :data="pageData" @on-selection-change="onSelectionChange"></Table>
        <Modal :title="title" v-model="modal1" class-name="vertical-center-modal" :closable="false">
          <Form ref="formValidate" :model="formData" :label-width="80" :rules="ruleValidate">
            <FormItem label="学号" prop="studentNo">
              <Input v-model="formData.studentNo" :disabled="editdisable"></Input>
            </FormItem>
            <FormItem label="学生姓名" prop="name">
              <Input v-model="formData.name"></Input>
            </FormItem>
            <FormItem label="性别" prop="sex">
              <RadioGroup v-model="formData.sex">
                <Radio label="1">男</Radio>
                <Radio label="2">女</Radio>
              </RadioGroup>
            </FormItem>
            <FormItem label="生日">
              <DatePicker
                type="date"
                placeholder="请选择"
                v-model="formData.birthday"
                style="width:100%"
              ></DatePicker>
            </FormItem>
            <FormItem label="学生所在班级">
              <!-- <Input v-model="formData.classId"></Input> -->
              <Select v-model="formData.classId">
                <Option
                  v-for="item in classList"
                  :value="item.id"
                  :key="item.id"
                  :label="item.name"
                ></Option>
              </Select>
            </FormItem>
          </Form>
          <div slot="footer">
            <Button type="text" size="large" @click="model1Closed()">取消</Button>
            <Button type="primary" size="large" @click="ok()">确定</Button>
          </div>
        </Modal>
        <Modal title="EXCEL导入" v-model="excelModel" class-name="vertical-center-modal">
          <Upload
            ref="upload"
            type="drag"
            :action="importUrl"
            :on-success="handleSuccess"
            :format="['xlsx','xls']"
            :on-format-error="handleFormatError"
          >
            <div style="padding: 20px 0">
              <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
              <p>点击或拖拽文件上传</p>
            </div>
          </Upload>
          <div slot="footer"></div>
        </Modal>
      </div>
      <div slot="pager">
        <!-- <Page :total="data1.length"/> -->
        <Page
          :total="pageTotal"
          :current="pageNum"
          :page-size="pageSize"
          show-total
          show-sizer
          placement="top"
          @on-change="handlePage"
          @on-page-size-change="handlePageSize"
        />
      </div>
    </MasterPage>
  </section>
</template>
<script>
import MasterPage from "@/components/Master";
import { pageList, add, update, generate, remove } from "@/services/student";
import { pageList as classPageList } from "@/services/class";

export default {
  components: {
    MasterPage
  },
  async mounted() {
    console.log("class");
    // this.data1 = await list()
    this.search();
    console.log(this.data1);
    let { list } = await classPageList();
    this.classList = list || [];
    // this.pageTotal = this.data1.length
  },
  computed: {
    pageData() {
      let start = (this.pageNum - 1) * this.pageSize;
      let end = this.pageNum * this.pageSize;
      end = end > this.pageTotal ? this.pageTotal : end;
      return this.data1.slice(start, end);
    }
  },
  methods: {
    handleFormatError(file) {
      this.$Notice.warning({
        title: "文件格式不正确",
        desc: `文件:${file.name}格式不正确，请上传.xls,.xlsx文件。`
      });
    },
    handleSuccess(res, file) {
      if (res && res.success) {
        this.$Message.info("数据导入成功");
      } else {
        this.$Notice.error({ title: "数据导入失败", desc: res.message });
        this.$refs.upload.clearFiles();
      }
    },
    excelImport(type) {
      let importUrl = this.GLOBAL.updateUrl;
      if (type == 1) {
        importUrl += "/gm_student/import/bodystatus";
      } else if (type == 2) {
        importUrl += "/gm_student/import/assessment";
      } else if (type == 3) {
        importUrl += "/gm_student/import/sub";
      } else if (type == 4) {
        importUrl += "/gm_student/import/attendance";
      } else if (type == 5) {
        importUrl += "/gm_student/import/quality";
      }
      this.importUrl = importUrl;

      this.excelModel = true;
      this.files = [];
    },
    exportDoc() {
      let url = this.GLOBAL.updateUrl + "/export/qualityReportDoc";
      let params = "";
      if (this.formItem.studentNo)
        params += "&studentNo=" + this.formItem.studentNo;
      if (this.formItem.name) params += "&name=" + this.formItem.name;
      if (this.formItem.classId) params += "&classId=" + this.formItem.classId;
      if (params) {
        let paramUrl = params.substring(1);
        url += "?" + paramUrl;
      }
      console.log("==exportDoc", url, this.formItem);
      window.open(url);
      // window.location.href = this.GLOBAL.updateUrl + "/export/down";
    },
    removeSelection() {
      //批量删除
      this.$Message.success("删除成功");
    },
    onSelectionChange(selection) {
      console.log(selection);
      this.selection = selection;
    },
    edit(row) {
      this.formData = row;
      this.title = "编辑";
      this.editdisable = true;
      this.modal1 = true;
    },
    async remove1(row) {
      console.log(row);
      await remove(row.id, 1);
      this.data1 = await list();
    },
    async add() {
      this.formData.sex = "1";
      this.title = "新增";
      this.editdisable = false;
      this.modal1 = true;
    },
    async ok() {
      let valid = await this.$refs.formValidate.validate();
      if (!valid) return;
      console.log(this.formData);
      if (!this.formData.id) {
        //新增
        await add(this.formData);
      } else {
        //修改
        await update(this.formData);
      }
      // this.data1 = await list()
      this.model1Closed();
    },
    model1Closed() {
      this.modal1 = false;
      this.formData = {};
      this.$refs.formValidate.resetFields();
      this.search();
    },
    async search() {
      let { count, list } = await pageList(this.formItem);
      console.log(count, list);
      this.data1 = list;
      this.pageTotal = count;
    },
    handlePage(n) {
      console.log(n, this.pageNum);
      this.pageNum = n;
    },
    handlePageSize(n) {
      console.log(n, this.pageSize);
      this.pageSize = n;
    }
  },
  data() {
    return {
      importUrl: "",
      excelModel: false,
      files: [],
      classList: [{ id: 1, name: "一（1）班" }, { id: 2, name: "一（2）班" }],
      editdisable: false,
      selection: [],
      modal1: false,
      title: "",
      formData: {},
      pageTotal: 15,
      pageNum: 1,
      pageSize: 10,
      formItem: {},
      columns1: [
        {
          type: "selection",
          width: 60,
          align: "center"
        },
        {
          title: "学号",
          key: "studentNo"
        },
        {
          title: "学生姓名",
          key: "name"
        },
        {
          title: "性别",
          key: "sex",
          render: (h, params) => {
            return h("p", params.row.sex == 1 ? "男" : "女");
          }
        },
        {
          title: "生日",
          key: "birthday"
        },
        {
          title: "所在班级",
          key: "classId"
        },
        {
          title: "操作",
          // key: 'action',
          width: 150,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "info",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.edit(params.row);
                    }
                  }
                },
                "编辑"
              )
            ]);
          }
        }
      ],
      ruleValidate: {
        studentNo: [{ required: true, message: "必填", trigger: "blur" }],
        name: [{ required: true, message: "必填", trigger: "change" }],
        sex: [{ required: true, message: "必填", trigger: "change" }]
      },
      data1: [
        {
          id: 1,
          classId: "1",
          studentNo: "1",
          name: "学霸",
          sex: "1",
          birthday: "2016-1-1"
        },
        {
          id: 2,
          classId: "2",
          studentNo: "2",
          name: "学渣",
          sex: "2",
          birthday: "2016-11-11"
        }
      ]
    };
  }
};
</script>
